<template>
	<el-row id="container">

		<Header></Header>

		<el-col :span="24" id="outter_container">
			<el-col :span="14" :offset="5" id="content_container">

				<el-col :span="24" id="transactionsitle">
					<div id="title"> <span>交易</span> </div>
					<el-breadcrumb separator="/" id="breadcrumb">
						<el-breadcrumb-item id="breadcrumblink" :to="{ path: '/' }">主页</el-breadcrumb-item>
						<el-breadcrumb-item id="currentpage">交易</el-breadcrumb-item>
					</el-breadcrumb>
				</el-col>

				<el-col :span="24" id="searchtool">

					<el-col :span="8" class="ncon">
						<el-col :span="9" id="transactionidtitle">
							<span id="transactionidtitlespan">交易ID：</span>
						</el-col>
						<el-col :span="14" class="inputcontainer">
							<el-input id="txsid" placeholder="请输入交易ID" size="medium" v-model="txsid" clearable @input="idsearch(txsid)"></el-input>
						</el-col>
					</el-col>

					<el-col :span="8" class="ncon">
						<el-col :span="9" id="txsnumtitle">
							<span id="txsnumtitlespan">交易单号：</span>
						</el-col>
						<el-col :span="14" class="inputcontainer">
							<el-input id="txsnum" placeholder="请输入交易单号" size="medium" v-model="txsnum" clearable v-bind:disabled="this.inputflag"></el-input>
						</el-col>
					</el-col>

					<el-col :span="1" id="searchbtn">
						<el-button icon="el-icon-search" circle v-on:click="querytxs"></el-button>
					</el-col>

				</el-col>

				<el-col :span="24" id="txsinfo">
					<el-table :data="tableData" height="100%" style="width: 100%" :row-style="rowClass" @row-click="readdetail" id="txsinfotable">
						<el-table-column prop="type" width="125%" label="类型" align="left"/>
						<el-table-column prop="extra.marketName" width="160%" label="所属市场" align="left"/>
						<el-table-column width="20%"/>
						<el-table-column prop="txHash" width="400%" label="交易ID" align="left"/>
						
						<el-table-column prop="mark" label="单号" width="180%" align="left"/>
						<el-table-column prop="time" label="时间" width="180%" align="left" :formatter="timeformatter"/>
					</el-table>
				</el-col>

				<el-col :span="24" id="paging">
					<el-pagination id="pagingc" background @current-change="handleCurrentChange" layout="prev, pager, next" :total="total"></el-pagination>
				</el-col>

			</el-col>
		</el-col>

		<Footer></Footer>

	</el-row>
</template>

<script>

	import Header from '../components/header1.vue'
	import Footer from '../components/footer.vue'

	export default {

		components: {
			Header, 
			Footer 
		},

		data () {
			return {
				list: "",
				txsid: "",
				txsnum: "",
				total: 0, //%10+1
			    inputflag: false, //
			    currentPage: 1,
			    tableData: null,
			    fflag: 1,
			}
		},

		created () {
			// this.current_time = parseInt(new Date().valueOf() / 1000)
		},

		mounted () {
			this.setData()
		},

		destroyed () {
			eventBus.$emit('txdetail',this.list)
		},

		methods: {

			rowClass: function (row, index) {
				return { 
					"cursor": "pointer"
					// "font-size": "0.77vw"
				}
			},

			timeformatter: function(row, column) {
				let date

				if(row.time.toString().length===10)
				{
					date = new Date(row.time * 1000)
				} else {
					date = new Date(row.time)
				}

				let a = [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
				function paddNum(s) {
					s += ""
					return s.replace(/^(\d)$/,"0$1");
				}
				let h = paddNum(date.getHours());
				let m = paddNum(date.getMinutes());
				let s = paddNum(date.getSeconds());
				a = a + " " + h + ":" + m + ":" + s
				// if (date.getHours() < 12) {
				// 	a = a + " AM"
				// } else {
				// 	a = a + " PM"
				// }
				return a
			},

			readdetail(row, event, column) {

				let param = {
					txHash:row.txHash
				}

				this.$api.post('blockchain/tx', param, r => {
					this.list = r
					this.$router.push(`/transactions/${JSON.stringify(r.data.txHash)}`)
				})

			},

			querytxs () {
				if (this.txsid === "" && this.txsnum === "") {
					alert("搜索内容为空")
				} else {

					let param = {
						txHash:this.txsid,
						mark:this.txsnum
					}

					this.$api.post('blockchain/tx', param, success => {
						this.list = success
						this.$router.push(`/transactions/${JSON.stringify(success.data.txHash)}`)
					}, failure => {
						alert("该交易不存在")
					})
				}
				
			},

			idsearch (txsid) {
				if (txsid==="") {
					this.inputflag = false
				} else {
					this.inputflag = true
					this.txsnum = ""
				}
			},

			setData (){

				let param
				if (this.fflag != 1) {
					param = {
						number:this.total,
						itemsPerPage:10,
						whichPage:this.currentPage
					}
				} else if(this.fflag === 1){
					param = {
						itemsPerPage:10,
						whichPage:this.currentPage
					}
					this.fflag = 0
				}

				this.$api.post('blockchain/txs', param, r => {
					this.tableData = r.data
					this.tableData.forEach(function(i,index) {
						// console.log(i["number"])
						let a
						switch (i.type) {
							case "RetailInfo": a="零售单"; i["type"]=a; break;
							case "SaleInfo" : a="销售单"; i["type"]=a; break;
							case "PurchaseInfo" : a="进货单"; i["type"]=a; break;
							case "ReceiveInfo" : a="收货单"; i["type"]=a; break;
							case "AccessCertificate" : a="准入证明"; i["type"]=a; break;
							case "Market" : a="市场检查表"; i["type"]=a; break;
							case "Gov" : a="日常检查表"; i["type"]=a; break;
							default : console.log("haven't such type"); break;
						}
					})
					if (this.total === 0) {
						this.total = r.data[0].number
					}

				})
			},

            handleCurrentChange(val){
              this.currentPage = val
              this.tableData = this.setData()
            }
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

	/*.el-button:hover {
		color: #fff;
		background-color: #1DB2BF;
		border: #1DB2BF;
	}*/

	#currentpage>>>.el-breadcrumb__inner{
		font-size: 0.9vw;
		color: #1DB2BF;
	}

	#breadcrumblink>>>.el-breadcrumb__inner{
		font-size: 0.9vw;
		font-weight: 400;
	}

	#breadcrumblink>>>.el-breadcrumb__inner.is-link:hover {
		color: #1DB2BF;
	}

	#breadcrumb {
		float: right;
		/*font-size: 0.83vw;*/
		position: relative;
        top: 50%; 
        margin-top: -1.1vw;
	}

	#container {
		position: absolute;
		margin-top: 0px;
		margin-bottom: 0px;
		height: 100%;
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;
	}

	#outter_container {
		height: 82.6%;
		margin-top: 4.5px;
	}

	#content_container {
		/*min-height: 579.4px;*/
		height: 100%;
		background-color: rgb(248, 248, 248);
		padding: 18px;
		padding-top: 10px;
	}

	/*.f {
		height: 300%;
	}*/

	.ncon {
		height: 100%;
	}

	.inputcontainer {
		position: relative;
        top: 50%; /*偏移*/
        margin-top: -40px;
	}

	#transactionsitle {
		height: 8.1%;
		border-bottom:2px solid #E6E6E6;
	}

	#title {
		font-size: 1.2vw;
		position: relative;
        top: 50%; 
        margin-top: -1vw;
		/*border-bottom:2px solid #E6E6E6;*/
	}

	#searchtool {
		margin-top: 0.8%;
		margin-bottom: 1%;
		height: 6%;
	}

	#searchbtn {
		margin-left: 1.8%;
		position: relative;
        top: 50%;
        margin-top: -40.5px;
	}

	#transactionidtitle {
		/*margin-top: 1.9%;*/
		text-align: center;
		/*font-size: 146%;*/
		position: relative;
        top: 50%;
        margin-top: -0.8vw;
		font-size: 1.1vw;
	}

	#transactionidtitlespan {
		float: right;
		margin-right: 0.3vw;
		/*margin: 0 auto;*/
	}

	#txsnumtitle {
		/*margin-top: 1.9%;*/
		text-align: center;
		/*font-size: 146%;*/
		position: relative;
        top: 50%;
        margin-top: -0.8vw;
		font-size: 1.1vw;
		/*height: 100%;*/
	}

	#txsnumtitlespan {
		float: right;
		margin-right: 0.3vw;
	}

	#txsinfo{
		height: 78%;
		margin-bottom: 1%;
	}

	#txsinfotable {
		/*text-align: center;*/
		/*cursor: pointer;*/
		text-align: center;
		/*min-height: 404px;*/
	}

	#paging {
		text-align:center;
		/*margin: 0 auto;*/
		height: 4.1%;
	}

	#pagingc {
		position: relative;
        top: 50%;
        margin-top: -14px;
	}

</style>